<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>element的布局</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!--    引入 vue.js
            ele 的css / js
    -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">

    <style>
    </style>
</head>
<body>

<!--
    <el-table> 标签的名称
    :data  数据绑定
    style  样式
     <el-table-column> 列
            prop  数据中的属性值
            label  列的标头
            width  宽度
-->
<div id="app">

    <el-table
            :data="users"
            border
            style="width: 100%">
        <el-table-column
                prop="uid"
                label="用户编号"
                width="180">
        </el-table-column>

        <el-table-column
                prop="username"
                label="姓名"
                width="180">
        </el-table-column>

        <el-table-column
                prop="password"
                label="密码"
                width="240">
        </el-table-column>

    </el-table>

</div>

<!-- 内容区域 /-->
<script>
    new Vue({
        el: "#app",
        data: {
            users: [

            ]
        },
        methods: {

            findUsers(){
                axios(
                    {
                        method:"GET",
                        url:"http://localhost:8080/users"
                    }
                ).then(resp=>{
                    console.log(resp.data);
                    this.users = resp.data.data;
                })
            }

        },
        created() {
            this.findUsers();
        }
    });
</script>
</body>

</html>